<template>
	<view class="container">
		<div class="init-ui" v-if="showInitUI">
			<div class="title">
				<image src="/static/icon/logo.png" alt="" class="logo-icon"></image>
				<div class="logo-text">智能求医</div>
			</div>
			<div class="blank"></div>
			<div class="question-box">
				<u--textarea v-model="userQuestion" placeholder="尽管问..." class="question-input"></u--textarea>
				<div class="question-btn">
					<u-button icon="checkmark" type="primary" text="发送" size="small" @click="startChat"></u-button>
				</div>
			</div>
			<div class="example">
				<div class="tip-item" @click="startChat('青光眼患者如何及时就诊？')">🤔青光眼患者如何及时就诊？</div>
				<div class="tip-item" @click="startChat('️‍️为何高度近视患者更注重定期检查？')">👓️为何高度近视患者更注重定期检查？</div>
				<div class="tip-item" @click="startChat('眼底健康会与饮食习惯有关系吗？')">🍚眼底健康会与饮食习惯有关系吗？</div>
				<div class="tip-item" @click="startChat('️‍️如何更好的预防眼底疾病？')">🙏️如何更好的预防眼底疾病？</div>
				<div class="tip-item" @click="startChat('医生常说的眼底检查到底是什么？')">😶‍🌫知乎：医生常说的眼底检查到底是什么？</div>
			</div>
		</div>
		<div class="continue-chat" v-else>
			<div class="card-style">
				<div class="chat-content">
					<div class="single-chat" v-for="(item,index) in chatHistory" :key="index">
						<div class="user-chat" v-if="item.role === 1">
							<div class="user-content">{{item.content}}</div>
							<u-avatar src="https://service-plat.oss-cn-beijing.aliyuncs.com/avatar.jpg"
								class="user-avatar"></u-avatar>
						</div>
						<div class="model-answer" v-else>
							<u-avatar src="https://service-plat.oss-cn-beijing.aliyuncs.com/model_avatar.png"
								class="model-avatar"></u-avatar>
							<div class="model-content">{{item.content}}</div>
						</div>
					</div>
				</div>
				<div class="inner-box">
					<u--textarea v-model="userQuestion" placeholder="还有什么问题,尽管问..."
						class="inner-question-input"></u--textarea>
					<div class="inner-submit-btn">
						<u-button icon="checkmark" type="primary" text="发送" size="small" @click="startChat"></u-button>
					</div>
				</div>
			</div>
		</div>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import io from '@hyoga/uni-socket.io';
	export default {
		data() {
			return {
				userQuestion: '',
				showInitUI: true,
				chatHistory: [],
				socket: null,
				answer: '',
				idx: 0,
			}
		},
		onHide() {
			// 离开时断开Socketio连接
			if (this.socket !== null) {
				this.socket.disconnect();
			}
		},
		methods: {
			startChat(question) {

				// 问题传入有两种方式 如果通过参数传递 那就是使用了例子 否则为null 代表通过问问题方式
				if (question === null || question === undefined) {
					if (this.userQuestion === '' || this.userQuestion.length <= 0) {
						this.$refs.uToast.show({
							type: 'warning',
							message: "请先输入问题",
							position: "top"
						});
						return;
					}
					question = this.userQuestion
				}

				this.showInitUI = false;
				this.answer = '';
				this.idx = 0;

				this.chatHistory.push({
					role: 1,
					content: question,
				})

				this.chatHistory.push({
					role: 0,
					content: '',
				})

				let that = this;
				setInterval(function() {
					let len = that.chatHistory.length;
					if (that.idx < that.answer.length) {
						that.chatHistory[len - 1].content = that.answer.slice(0, that.idx + 1);
						that.idx++;
					}
				}, 70)
				this.socket = io('https://yiyuy.mynatapp.cc/spark', {
					transports: ['websocket'],
					timeout: 5000,
				});

				// 监听服务器事件
				this.socket.on('server_response', (message) => {
					// 收到服务器推送的消息，可以跟进自身业务进行操作
					if (message.data === '[over]') {
						this.socket.disconnect()
					} else {
						this.answer += message.data;
					}
				});
				
				this.socket.emit('startTalk',{question:question})

				this.userQuestion = ''
			}
		}
	}
</script>

<style>
	@keyframes moveIn {
		0% {
			opacity: 0;
			transform: translateY(12px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.container {
		width: 100%;
		height: 100vh;
	}

	.init-ui {
		width: 100%;
		height: 100%;
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.title {
		display: flex;
		width: 95%;
		margin: 5px auto;
		align-items: center;
		justify-content: center;
	}

	.logo-icon {
		width: 100px;
		height: 100px;
	}

	.logo-text {
		display: flex;
		align-items: center;
		text-align: center;
		font-size: 40px;
		font-weight: 600;
		color: #333;
		font-family: "FZYaoti", cursive, serif, sans-serif;
		letter-spacing: 20px
	}

	.blank {
		width: 100%;
		height: 3%;
	}

	.question-box {
		height: 25%;
		position: relative;
	}

	.question-btn {
		position: absolute;
		right: 25px;
		bottom: 15px;
	}

	.question-input {
		height: 80%;
		width: 85%;
		margin: 10px auto;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 5px;
	}

	.example {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tip-item {
		padding: 7px 12px 7px 8px;
		border-radius: 12px;
		width: 85%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		box-sizing: border-box;
		font-family: PingFang SC, sans-serif;
		font-size: 14px;
		cursor: pointer;
		background-color: #ffffff;
		transition: background-color .3s cubic-bezier(.36, .66, .04, 1);
		border: 1px solid #e5e5e5;
		color: rgba(0, 0, 0, .87);
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-top: 15px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.tip-item:active {
		background-color: #e5e5e5;
	}

	.card-style {
		height: 98%;
		border-radius: 5px;
		border: 1px solid #ebeef5;
		background-color: #fff;
		overflow: hidden;
		color: #303133;
		transition: .3s;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
		display: flex;
		flex-direction: column;
	}

	.continue-chat {
		height: 100%;
		padding: 5px;
		border-radius: 5px;
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.chat-content {
		overflow-y: scroll;
		height: 80%;
		padding: 5px;
		font-size: 14px;
	}

	.user-chat {
		margin-top: 5px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		animation: moveIn .9s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.user-content {
		background-color: #2d65f7;
		border-radius: 12px;
		padding: 10px 16px;
		color: #fff;
		font-size: 14px;
	}

	.user-avatar {
		margin-left: 5px;
	}

	.model-answer {
		margin-top: 5px;
		display: flex;
		align-items: center;
		animation: moveIn .9s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.model-content {
		border-radius: 12px;
		padding: 10px 16px;
		background-color: #f5f7fa;
	}

	.model-avatar {
		margin-right: 5px;
	}

	.inner-box {
		flex: 1;
		position: relative;
		border-radius: 5px;
	}

	.inner-question-input {
		height: 100%;
	}

	.inner-submit-btn {
		position: absolute;
		right: 5px;
		bottom: 5px;
	}
</style>